<!DOCTYPE html>
<html lang="{{ @this->lang() }}">
<head>
    <include href="blocks/head.html" />
    <style type="text/css">
        .tab-content .progress {
            max-width: 240px;
            margin-left: auto;
            margin-right: auto;
        }
        .file-list li .delete {
            display: none;
        }
    </style>
</head>
<body>
<set fullwidth="{{ true }}" />
<include href="blocks/navbar.html" />
<div class="container-fluid">
    <h2>{{ @project.name | esc }} <small>#{{ @project.id }}</small></h2>
    <dl class="dl-inline">
        <dt>{{ @dict.cols.assignee }}</dt>
        <dd>
            <check if="{{ @project.owner_id }}">
                <true>
                    <check if="{{ @project.owner_username }}">
                        <true>
                            <a href="{{ @BASE }}/user/{{ @project.owner_username }}">{{ @project.owner_name | esc }}</a>
                        </true>
                        <false>
                            {{ @project.owner_name | esc }}
                        </false>
                    </check>
                </true>
                <false>
                    {{ @dict.not_assigned }}
                </false>
            </check>
        </dd>
    </dl>
    <check if="{{ @project.description }}">
        <div class="tex">{{ @project.description | parseText }}</div><br>
    </check>

    <div class="row">
        <div class="col-md-6">
            <h3 class="h4"><i>{{ @dict.project_overview }}</i></h3>
            <set percentComplete="{{ round(@stats.complete / @stats.total * 100) }}" />
            <div class="progress" style="max-width: 400px; margin: 15px 0 0;">
                <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="{{ @percentComplete }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ @percentComplete }}%;">
                    <span class="sr-only">{{ @dict.n_complete, @percentComplete.'%' | format }}</span>
                </div>
            </div>
            {{ @dict.n_complete,@stats.complete.'/'.@stats.total | format }}
        </div>
        <div class="col-md-6 clearfix">
            <div class="hidden-sm hidden-xs" style="margin-bottom: 1em;"></div>
            <div class="pull-right text-center" style="margin-left: 1em;">
                <b>{{ @dict.cols.hours_spent }}</b>
                <div class="h4">{{ @stats.hours_spent }}</div>
            </div>
            <div class="pull-right text-center">
                <b>{{ @dict.cols.hours_total }}</b>
                <div class="h4">{{ @stats.hours_total }}</div>
            </div>
        </div>
    </div>

    <hr>


    <ul class="nav nav-tabs" role="tablist">
        <li class="active">
            <a href="#tab-tree" data-toggle="tab">{{ @dict.project_tree }}</a>
        </li>
        <li>
            <a href="#tab-files" data-toggle="tab">{{ @dict.files }}</a>
        </li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="tab-tree">
            <include href="issues/project/tree.html" />
        </div>
        <div class="tab-pane" id="tab-files">
            <div class="progress progress-striped active">
                <div class="progress-bar" style="width: 100%"></div>
            </div>
        </div>
    </div>

    <include href="blocks/footer.html" />
    <script src="{{ @BASE }}/js/stupidtable.min.js"></script>
    <script type="text/javascript">
        $(function() {
            setTimeout(function() {
                // Fetch file list
                $.get(BASE + '/issues/project/{{ @project.id }}/files', function(data) {
                    $('#tab-files').html(data);

                    // Add file thumbnail popovers
                    $('.file-list li').each(function() {
                        $el = $(this);
                        $el.popover({
                            trigger: 'hover',
                            html: true,
                            delay: {
                                show: 250,
                                hide: 50
                            },
                            container: 'body',
                            placement: 'auto right',
                            content: '<b>' + $el.attr('data-name') + '</b><br>' + $el.attr('data-user') + '<br>' + $el.attr('data-date') + '<br>' +$el.attr('data-size')
                        });
                    });

                    // Make file table sortable
                    $('#files-table table').stupidtable();
                }, 'html');
            }, 250);
        });
    </script>
</div>
</body>
</html>
